<template>
  <view class="guahao">
    <view class="item" v-for="(item, index) in list" :key="item._id">
      <view class="head">
        <image :scr="item.avatar"></image>
        <view class="txt">
          <p class="p1">{{ item.tre_doctor }}</p>
          <p class="p2">{{ item.tre_place }}</p>
        </view>
      </view>
      <view class="info1">
        <p class="p3">预约流水号</p>
        <p class="p4">{{ item.se_number }}</p>
      </view>
      <view class="info1">
        <p class="p3">就诊人</p>
        <p class="p4">{{ item.patient_name }}</p>
      </view>
      <view class="info1">
        <p class="p3">就诊时间</p>
        <p class="p4">{{ item.tre_time }} {{ item.the_time }}</p>
      </view>
      <view class="info1">
        <p class="p3">科室</p>
        <p class="p4">{{ item.dep_ment }}</p>
      </view>
      <view class="info1">
        <p class="p3">排队号</p>
        <p class="p4">{{ item.que_number }}</p>
      </view>
      <view class="info1">
        <p class="p3">科室楼层</p>
        <p class="p4">{{ item.remark }}</p>
      </view>
      <view class="info1">
        <p class="p3">挂号费用</p>
        <p class="p4">￥{{ item.reg_cost }}</p>
      </view>
      <view class="button" v-if="item.cancel">
        <button class="button1" @click="CanCelOrder(item._id)">
          取消预约
        </button></view
      >
      <view class="button" v-else>
        <button class="button2">已取消预约</button></view
      >
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { api } from "../../api/api";
import type { doctorApiT } from "../../types/type";
const list = ref<doctorApiT[]>([]);
const getList = async () => {
  const res: any = await api.user_registrat();
  list.value = res.data;
};
onMounted(() => {
  getList();
});
const CanCelOrder = async (id: string) => {
  const res: any = await api.regist_cancel({ _id: id });
  if (res.msg == "SUCCESS") {
    getList();
  }
};
</script>

<style lang="scss" scoped>
.guahao {
  width: 100vw;
  //   height: 100vh;
  background-color: #f6f6f6;
  padding: 0 20rpx;
  box-sizing: border-box;
  .button {
    width: 100%;
    button {
      width: 250rpx;
      height: 80rpx;
      margin-left: 400rpx;
    }
    .p {
      margin-left: 550rpx;
    }
    .button1 {
      border: 1px solid #527be6;
      color: #527be6;
    }
    .button2 {
      border: 1px solid #ccc;
      color: #ccc;
    }
  }
  .item {
    width: 100%;
    padding: 20rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    background-color: #fff;
    border-radius: 10rpx;
    .head {
      display: flex;
      image {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
      }
      .txt {
        .p1 {
          font-weight: 600;
          margin-bottom: 20rpx;
        }
      }
    }
    .info1 {
      display: flex;
      justify-content: space-between;
      margin: 25rpx 0;
      .p4 {
        text-align: right;
      }
    }
  }
}
</style>
